<!-- 楼盘种类板块头部区域 -->
<template>
  <div class="head_container">
    <div class="choose">
      <div class="chooseItem" v-for="item in list" :key="item.id">
        <a :href="item.href" :class="item.chosen?'aChosen':''" @click="choose(item.id)"><span
            :class="item.chosen?'chosen':''">{{item.title}}</span></a>
        <div class="noThing"></div>
      </div>
    </div>
    <a href="javascript:;" class="more">更多>></a>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup () {
    const list = ref([
      {
        id: 1,
        href: 'javascript:;',
        title: '房产知识',
        chosen: true
      }
    ])
    const choose = (id) => {
      list.value.forEach(item => {
        if (id === item.id) {
          item.chosen = true
        } else {
          item.chosen = false
        }
      })
    }
    return {
      list,
      choose
    }
  }

})
</script>

<style lang='less' scoped>
.head_container {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  width: 1180px;
  height: 65px;
  .choose {
    display: flex;
    align-items: center;
    a {
      display: flex;
      align-items: center;
      height: 100%;
      line-height: 23px;
      padding-top: 21px;
      padding-bottom: 21px;
      border-bottom: 2px solid #ededed;
      span {
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 23px;
        color: #9399a5;
      }
      .chosen {
        // margin-top: 16px;
        // margin-bottom: 16px;
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 700;
        font-size: 28px;
        line-height: 33px;
        color: #3072f6;
      }
    }
    .aChosen {
      padding-top: 16px;
      padding-bottom: 16px;
      box-sizing: border-box;
      border-bottom: 2px solid #3072f6;
    }
  }
  .more {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    height: 64px;
    align-items: center;
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #333333;
    border-bottom: 2px solid #ededed;
  }
  .chooseItem {
    display: flex;
    .noThing {
      width: 40px;
      height: 65px;
      border-bottom: 2px solid #ededed;
    }
  }
}
</style>
